:root {
    --primary-color: #4f46e5;
    --secondary-color: #6366f1;
    --success-color: #10b981;
    --text-dark: #1e293b;
    --text-light: #f8fafc;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.5;
    background: #f1f5f9;
    min-height: 100vh;
    padding: 2rem;
}

h1 {
    @apply text-4xl font-bold text-center mb-8 bg-gradient-to-r from-[var(--primary-color)] to-[var(--secondary-color)] bg-clip-text text-transparent;
}

.main-buttons {
    @apply grid gap-4 max-w-2xl mx-auto;
}

.main-buttons button {
    @apply px-6 py-3 text-lg font-medium rounded-lg transition-all;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: var(--text-light);
    box-shadow: var(--shadow-md);
}

.main-buttons button:hover {
    @apply transform -translate-y-1 shadow-lg;
    opacity: 0.9;
}

.page {
    @apply max-w-2xl mx-auto bg-white rounded-xl shadow-xl p-6 mb-8;
}

.page h2 {
    @apply text-2xl font-semibold mb-6 text-[var(--text-dark)];
}

.form-group {
    @apply grid gap-4 grid-cols-2 mb-4;
}

label {
    @apply block text-sm font-medium text-gray-600 mb-1;
}

input, select {
    @apply w-full px-4 py-2 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[var(--primary-color)] focus:border-transparent transition-all;
}

button[type="submit"] {
    @apply mt-4 px-6 py-2 bg-[var(--success-color)] text-white rounded-lg hover:bg-opacity-90 transition-colors;
}

@media (max-width: 640px) {
    body {
        @apply p-4;
    }

    .main-buttons {
        @apply grid-cols-1;
    }
}